
import * as echarts from 'echarts'
export default class ShuiQingOption {  // 获取二维水动力水深过程线echart配置信息
  public static getOption(xDataArr: any, grz: any, wrz: any, yDataArr: any, yDataArrLiu: any) {
    const option: any = {
      animationDuration: 1500,
      // animationDelay: 500,
      animationEasing: 'cubicOut',
      axisLabel: {
        fontSize: 18,
        fontFamily: 'OPPOSans-R'
      },
      grid: {
        left: '20',
        right: '20',
        top: '20',
        bottom: '20',
        containLabel: true
      },
      legend: {
        width: '70%',
        textStyle: {
          color: '#fff',
          fontSize: 18,
          fontFamily: 'OPPOSans-R'
        },
        data: ['水位', '警戒水位', '保证水位', '流量'],
        orient: 'horizontal',
        top: 20,
        itemHeight: 3,
        itemWidth: 15,
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        show: true,
        axisPointer: {
          type: 'cross'
        },
        enterable: true,
        transitionDuration: 2,
        backgroundColor: 'rgba(0, 0, 0,0.2)',
        //borderColor:'#1658ac',
        textStyle: {
          color: '#fff',
          fontSize: 18,
          fontFamily: 'OPPOSans-R'
        },
        formatter: function (params: any) {
          let tooltipContent = ''
          for (let i = 0; i < params.length; i++) {
            const param = params[i]
            const xAxisName = param.axisValueLabel || ''
            const seriesName = param.seriesName || ''
            const dataValue = param.data || ''
            if (i === 0) {
              tooltipContent += '' + xAxisName + ' ' + '<br/>'
            }
            //tooltipContent += 'y轴:' + yAxisName + ' ' + yAxisUnit + '<br/>'
            tooltipContent += '' + seriesName + ''
            if (seriesName === '水位') {
              tooltipContent += ': ' + dataValue + 'm' + '<br/>'
            }
            if (seriesName === '警戒水位') {
              tooltipContent += ': ' + dataValue + 'm' + '<br/>'
            }
            if (seriesName === '保证水位') {
              tooltipContent += ': ' + dataValue + 'm' + '<br/>'
            }
            if (seriesName === '流量' && dataValue != 'null') {
              tooltipContent += ': ' + dataValue + 'm³/s' + '<br/>'
            }
          }
          return tooltipContent
        }
      },
      xAxis: {
        data: xDataArr,
        type: 'category',
        axisTick: {
          show: false // 隐藏 x 轴刻度线
        },
        axisLabel: {
          color: '#fff',
          fontSize: 18,
          fontFamily: 'OPPOSans-R',
          interval: 3,
          align: 'center',
          padding: [0, 0, 0, 30]
        },
        axisLine: {
          lineStyle: {
            width: 2 // 设置x轴线条的宽度
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '水位 :m',
          axisLine: {
            show: true, // 隐藏 y 轴线
            lineStyle: {
              width: 2 // 设置轴线条的宽度
            }
          },
          axisTick: {
            show: false // 隐藏 y 轴刻度线
          },
          splitLine: {
            show: false
          },
          min: function (value: any) {
            const diff = (value.max - value.min) * 0.05
            return Math.floor(value.min - diff)
          },
          max: function (value: any) {
            const diff = (value.max - value.min) * 0.05
            return Math.ceil(value.max + diff)
          },
          nameLocation: 'end',
          nameTextStyle: {
            padding: [0, 0, 10, -20], // 可以根据需要调整
            color: '#fff'
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18,
            fontFamily: 'OPPOSans-R'
          }
        },
        {
          type: 'value',
          name: '流量:m³/s',
          axisLine: {
            show: false // 隐藏 y 轴线
          },
          axisTick: {
            show: false // 隐藏 y 轴刻度线
          },
          splitLine: {
            show: false
          },
          min: function (value: any) {
            return (value.min * 0.9).toFixed(0)
          },
          max: function (value: any) {
            return (value.max * 1.1).toFixed(0)
          },
          //interval: 20,
          nameLocation: 'end',
          nameTextStyle: {
            padding: [0, 0, 10, 20], // 可以根据需要调整
            color: '#fff'
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18,
            fontFamily: 'OPPOSans-R'
          }
        }
      ],
      series: [
        {
          name: '保证水位',
          type: 'line',
          data: grz,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            color: '#fbbc5e'
          },
          yAxisIndex: 0,
          areaStyle: {
            color: 'rgba(0, 0, 0, 0)',
            zlevel: 1
          }
        },
        {
          name: '警戒水位',
          type: 'line',
          data: wrz,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            color: 'rgb(148, 13, 13)'
          },
          yAxisIndex: 0,
          areaStyle: {
            color: 'rgba(0, 0, 0, 0)',
            zlevel: 1
          },
          lineStyle: {
            type: 'dashed'
          }
        },
        {
          name: '水位',
          type: 'line',
          data: yDataArr,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            color: 'rgb(46, 222, 243)'
          },
          yAxisIndex: 0,
          areaStyle: {
            color: 'rgba(0, 0, 0, 0)',
            zlevel: 1
          }
          // lineStyle: {
          //     type: 'dashed'
          // }
        },
        {
          name: '流量',
          type: 'line',
          data: yDataArrLiu,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            color: '#5877fa'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(88, 119, 250,0.8)' },
              { offset: 1, color: 'rgba(88, 119, 250,0.1)' }
            ]),
            zlevel: 2
          },
          yAxisIndex: 1
        }
      ]
    }

    return option;
  }
}